import React, { PureComponent } from 'react'
import { View, ScrollView, Text, StyleSheet } from 'react-native'
import * as _ from 'lodash'
import Spinner from 'react-native-loading-spinner-overlay'
import { createAction, NavigationActions } from '../../utils/index'
import {connect} from 'react-redux'
import OwnCard from './widgets/OwnCard'
import screen from '../../utils/screen'
import color from '../../utils/color'
import BackIcon from '../../widgets/BackIcon'
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';

@connect(({ tzyc, loading }) => ({ ...tzyc, isLoading: loading.models.tzyc }))
export default class extends PureComponent {
  static navigationOptions = ({ navigation }) => ({
    title: '预测结果',
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerLeft: ( <BackIcon backInvoke={() => { navigation.goBack(null) }}/>),
  })

  constructor(props) {
    super(props)
    const params = this.props.navigation.state.params || {}
    this.secondRespD = params.secondRespD
  }

  geneLeftCell = (title,details = []) => {
    return (
      <View>
        <Text style={[styles.cellTitleLeft]}>{title}</Text>
        {
          _.map(details, (v,i) => {
            return (
              <Text numberOfLines={1} key={i} style={styles.cellLeft}>{v}</Text>
            )
          })
        }
      </View>
    )
  }

  geneRightCellWithoutUnit = (num, details = []) => {
    return (
      <View>
        <Text numberOfLines={1} style={styles.cellTitleRight}>{num}</Text>
      </View>
    )
  }

  geneRightCell = (total, details = []) => {
    return (
      <View>
        <Text numberOfLines={1} style={styles.cellTitleRight}>{total}</Text>
        {
          _.map(details, (vv, j) => {
            return (
              <Text numberOfLines={1} key={j} style={styles.cellRight}>{vv}</Text>
            )
          })
        }
      </View>
    )
  }
  renderFirstLeft = () => {
    const { firstTitles}  = this.secondRespD || {};
    const { xjlrTitles, xjzcTitles } =  firstTitles || {}
    return (
      <View>
        <Text style={[styles.cellTitleLeft]}></Text>
        {
          this.geneLeftCell('现金流入', xjlrTitles)
        }
        {
          this.geneLeftCell('现金流出', xjzcTitles)
        }
        {
          this.geneLeftCell('项目净现金流量')
        }
        {
          this.geneLeftCell('累计净现金流量')
        }
        {
          this.geneLeftCell('项目净现金流量（考虑通胀）')
        }
        {
          this.geneLeftCell('累计净现金流量（考虑通胀）')
        }
      </View>
    )
  }

  renderFirstRight = () => {
    const { firstArr } = this.secondRespD || []
    console.log('firstArr ', firstArr)
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        {
          _.map(firstArr, (v, i) => {
            return (
              <View key={i} style={{width: screen.pxToDp(150)}}>
                {
                  this.geneRightCellWithoutUnit(v.year)
                }
                {
                  this.geneRightCell(v.aTotal, v.aDetails)
                }
                {
                  this.geneRightCell(v.bTotal, v.bDetails)
                }
                {
                  this.geneRightCell(v.cTotal)
                }
                {
                  this.geneRightCell(v.dTotal)
                }
                {
                  this.geneRightCell(v.eTotal)
                }
                {
                  this.geneRightCell(v.fTotal)
                }
              </View>
            )
          })
        }
      </View>
    )
  }

  renderSecondLeft = () => {
    const { secondTitles}  = this.secondRespD || {};
    const { xjlrTitles, xjzcTitles } =  secondTitles || {}
    return (
      <View>
        <Text style={[styles.cellTitleLeft]}></Text>
        {
          this.geneLeftCell('现金流入', xjlrTitles)
        }
        {
          this.geneLeftCell('现金流出', xjzcTitles)
        }
        {
          this.geneLeftCell('项目净现金流量')
        }
        {
          this.geneLeftCell('累计净现金流量')
        }
        {
          this.geneLeftCell('项目净现金流量（考虑通胀）')
        }
        {
          this.geneLeftCell('累计净现金流量（考虑通胀）')
        }
      </View>
    )
  }

  renderSecondRight = () => {
    const { secondArr } = this.secondRespD || []
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        {
          _.map(secondArr, (v, i) => {
            return (
              <View key={i} style={{width: screen.pxToDp(150)}}>
                {
                  this.geneRightCellWithoutUnit(v.year)
                }
                {
                  this.geneRightCell(v.aTotal, v.aDetails)
                }
                {
                  this.geneRightCell(v.bTotal, v.bDetails)
                }
                {
                  this.geneRightCell(v.cTotal)
                }
                {
                  this.geneRightCell(v.dTotal)
                }
                {
                  this.geneRightCell(v.eTotal)
                }
                {
                  this.geneRightCell(v.fTotal)
                }
              </View>
            )
          })
        }
      </View>
    )
  }

  render() {
    const { isLoading } = this.props;
    const { topData }  = this.secondRespD || {};
    const header1 = ['', '考虑通胀', '不考虑通胀']
    const header2 = ['', '部分资本金投入', '全资本金投入', '部分资本金投入', '全部资本金投入']
    const header3 = ['静态投资回收期', '内部收益率（IRR）']
    const content = topData
    return (
      <View style={styles.container}>
        <Spinner visible={isLoading} />
        <ScrollView>
          <OwnCard title="预测结果">
          <Table borderStyle={{borderWidth: 1, borderColor: '#bfbfbf' }}>
            <Row data={header1} flexArr={[1, 2, 2]} style={styles.head} textStyle={styles.text}/>
            <Row data={header2} flexArr={[1,1, 1, 1, 1]} style={styles.head} textStyle={styles.text}/>
            <TableWrapper style={{flexDirection: 'row'}}>
            <Col data={header3} style={styles.title} heightArr={[40,40]} textStyle={styles.text}/>
            <Rows data={content} flexArr={[1, 1,1, 1]} style={styles.row} textStyle={styles.text}/>
            </TableWrapper>
          </Table>
          </OwnCard>
          <OwnCard title="投入资金的现金流测算" extraTxt={<Text>（万元）</Text>}>
            <View style={styles.part}>
              {
                this.renderFirstLeft()
              }
              <ScrollView horizontal={true}>
                {
                  this.renderFirstRight()
                }
              </ScrollView>
            </View>
          </OwnCard>
          <OwnCard title="全资本金投入的现金流测算" extraTxt={<Text>（万元）</Text>}>
            <View style={styles.part}>
              {
                this.renderSecondLeft()
              }
              <ScrollView horizontal={true}>
                {
                  this.renderSecondRight()
                }
              </ScrollView>
            </View>
          </OwnCard>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    padding: screen.pxToDp(10)
  },
  row: {
    height: 40,
  },
  text: {
    textAlign: 'center'
  },
  cellLeft: {
    height: screen.pxToDp(65),
    width: screen.pxToDp(300),
    color: '#636363',
    paddingLeft: screen.pxToDp(30)
  },
  cellTitleLeft: {
    height: screen.pxToDp(65),
    width: screen.pxToDp(300),
    fontSize: screen.pxToDp(30),
    color: '#202020'
  },
  cellRight: {
    height: screen.pxToDp(65),
    width: screen.pxToDp(140),
    color: '#636363'
  },
  cellTitleRight: {
    height: screen.pxToDp(65),
    fontSize: screen.pxToDp(28),
    color: '#202020'
  },
  part: {
    flexDirection: 'row'
  }
})
